import React, {useEffect, useState} from 'react';
import {Calendar, Edit2, Eye, X} from 'lucide-react';
import {Req} from "../../util/fetch.ts";

interface ViewRecord {
    id: number;
    user: {
        realname: string;
        avatarUrl: string;
        position: string;
    };
    scanTime: string;
    duration: string;
}

interface Training {
    id: number;
    title: string;
    views: number;
    initScan: number;
}

interface StatsModalProps {
    training: Training;
    onClose: () => void;
}

// const mockViewRecords: ViewRecord[] = [
//   {
//     id: 1,
//     user: {
//       name: '张三',
//       avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e',
//       department: '销售部'
//     },
//     viewTime: '2024-03-15 14:30',
//     duration: '5分钟'
//   },
//   {
//     id: 2,
//     user: {
//       name: '李四',
//       avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330',
//       department: '市场部'
//     },
//     viewTime: '2024-03-15 15:20',
//     duration: '3分钟'
//   }
// ];

export default function StatsModal({training, onClose}: StatsModalProps) {
    const [initialViews, setInitialViews] = useState(training.initScan);
    const [isEditingViews, setIsEditingViews] = useState(false);
    const [viewRecord, setViewRecord] = useState<ViewRecord[]>([]);
    const [actualScanCount, setActualScanCount] = useState(0);
    const [totalScanCount, setTotalScanCount] = useState(0);
    // const actualViews = mockViewRecords.length;
    // const totalViews = initialViews + actualViews;

    const handleUpdateInitialViews = async () => {
        const res = await Req('/bsTrain/edit', {
            method: 'PUT',
            body: {
                id: training.id,
                initScan: initialViews
            },
            headers: undefined
        })
        if (res.success) {
            alert(res.message)
            queryList(training.id)
            setIsEditingViews(false);
        } else {
            alert(res.message)
        }
    };

    const queryList = async (id) => {
        const res = await Req(`/bsTrain/scan/${id}`)
        if (res.success) {
            setViewRecord(res.data.recordList)
            setActualScanCount(res.data.actualScanCount)
            setTotalScanCount(res.data.totalScanCount)
            setInitialViews(res.data.initScan)
        } else {
            alert(res.message)
        }
    };

    useEffect(() => {
        queryList(training.id)
    }, [])

    return (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
            <div className="bg-white rounded-lg w-full max-w-4xl mx-4 max-h-[90vh] flex flex-col">
                <div className="flex items-center justify-between p-4 border-b">
                    <h3 className="text-lg font-semibold text-gray-900">浏览统计</h3>
                    <button onClick={onClose}>
                        <X className="w-6 h-6 text-gray-500"/>
                    </button>
                </div>

                <div className="p-6">
                    <div className="bg-blue-50 rounded-lg p-6 mb-6">
                        <h4 className="font-medium text-blue-900 mb-4">{training.title}</h4>
                        <div className="grid grid-cols-3 gap-4">
                            <div className="bg-white rounded-lg p-4 shadow-sm">
                                <div className="text-sm text-gray-500 mb-1">总浏览量</div>
                                <div className="flex items-center text-2xl font-bold text-blue-600">
                                    <Eye className="w-6 h-6 mr-2"/>
                                    {totalScanCount}
                                </div>
                            </div>
                            <div className="bg-white rounded-lg p-4 shadow-sm">
                                <div className="text-sm text-gray-500 mb-1">实际浏览数</div>
                                <div className="text-2xl font-bold text-green-600">
                                    {actualScanCount}
                                </div>
                            </div>
                            <div className="bg-white rounded-lg p-4 shadow-sm">
                                <div className="text-sm text-gray-500 mb-1">初始浏览数</div>
                                <div className="flex items-center">
                                    {isEditingViews ? (
                                        <div className="flex items-center space-x-2">
                                            <input
                                                type="number"
                                                defaultValue={initialViews}
                                                onChange={(e) => setInitialViews(Number(e.target.value))}
                                                className="w-24 px-2 py-1 border rounded text-lg"
                                                min="0"
                                            />
                                            <button
                                                onClick={handleUpdateInitialViews}
                                                className="px-2 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm"
                                            >
                                                确定
                                            </button>
                                        </div>
                                    ) : (
                                        <div className="flex items-center">
                                            <span className="text-2xl font-bold text-gray-700">{initialViews}</span>
                                            <button
                                                onClick={() => setIsEditingViews(true)}
                                                className="ml-2 text-gray-400 hover:text-blue-500"
                                                title="修改初始浏览数"
                                            >
                                                <Edit2 className="w-4 h-4"/>
                                            </button>
                                        </div>
                                    )}
                                </div>
                            </div>
                        </div>
                    </div>

                    <h5 className="font-medium text-gray-900 mb-4">浏览记录</h5>
                    <div className="space-y-4" style={{maxHeight: '300px', overflowY: 'auto' }}>
                        {viewRecord.map(record => (
                            <div
                                key={record.id}
                                className="flex items-center justify-between p-4 bg-gray-50 rounded-lg"
                            >
                                <div className="flex items-center space-x-4">
                                    <img
                                        src={record.user.avatarUrl}
                                        className="w-10 h-10 rounded-full"
                                    />
                                    <div>
                                        <div className="font-medium text-gray-900">{record.user.realname}</div>
                                        <div className="text-sm text-gray-500">{record.user.position}</div>
                                    </div>
                                </div>
                                <div className="flex items-center space-x-6 text-gray-500 text-sm">
                                    <div className="flex items-center">
                                        <Calendar className="w-4 h-4 mr-1"/>
                                        {record.scanTime}
                                    </div>
                                    {/*<div className="flex items-center">*/}
                                    {/*  <Clock className="w-4 h-4 mr-1" />*/}
                                    {/*  {record.duration}*/}
                                    {/*</div>*/}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

                <div className="flex justify-end p-4 bg-gray-50 rounded-b-lg">
                    <button
                        onClick={onClose}
                        className="px-4 py-2 bg-white text-gray-700 rounded-lg hover:bg-gray-100"
                    >
                        关闭
                    </button>
                </div>
            </div>
        </div>
    );
}